<template>
    <el-steps :active="2" align-center style="margin-top: 50px;">
        <el-step title="提交订单" description="2023-7-7" />
        <el-step title="支付订单" description="2023-7-7" />
        <el-step title="商家发货" description="2023-7-7" />
        <el-step title="确认发货" description="2023-7-7" />
        <el-step title="完成" description="2023-7-7" />
    </el-steps>
    <div class="common-layout" style="padding: 15px;box-sizing: border-box;">
        <el-container style="border: 1px solid #cfcfcf;">
            <el-header style="background-color: rgb(243,243,243);border-bottom:1px solid #cfcfcf;
            height: 60px;line-height: 60px">
                <span>当前订单状态：待付款</span>
                <div style="float: right;">
                    <el-button>关闭订单</el-button>
                    <el-button>备注订单</el-button>
                </div>
            </el-header>
            <el-main>
                <p style="margin: 10px 0px;">基本信息</p>
                <el-table :data="tableData" style="width: 100%" row-key="id" border>
                    <el-table-column prop="bianhao" label="订单编号" />
                    <el-table-column prop="Invoice" label="发货单流水号" />
                    <el-table-column prop="username" label="用户信息" />
                    <el-table-column prop="PaymentMethod" label="支付方式" />
                </el-table>
                <el-table :data="tableData1" style="width: 100%" row-key="id" border>
                    <el-table-column prop="DeliveryMethod" label="配送方式" />
                    <el-table-column prop="logisticsNumber" label="物流单号" />
                    <el-table-column prop="points" label="订单可得积分" />
                    <el-table-column prop="nlll" label="" />
                </el-table>

                <p style="margin: 10px 0px;">收货人信息</p>
                <el-table :data="tableData2" style="width: 100%" row-key="id" border>
                    <el-table-column prop="username" label="收货人" />
                    <el-table-column prop="phone" label="手机号码" />
                    <el-table-column prop="PostalCode" label="邮政编码" />
                    <el-table-column prop="Address" label="收货地址" />
                </el-table>

                <p style="margin: 10px 0px;">商品信息</p>
                <el-table :data="tableData3" style="width: 100%" row-key="id" border>
                    <el-table-column prop="img" label="商品图片" />
                    <el-table-column prop="name" label="商品名称" />
                    <el-table-column prop="PriceNumber" label="价格/货号">
                        <template #default>
                            <p>价格：100</p>
                            <p>货号：No56489</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="数量" />
                    <el-table-column prop="subtotal" label="小计" />
                </el-table>
                <p style="text-align: right;color: #666;">合计：<span style="color: red;">￥100</span></p>

                <p style="margin: 10px 0px;">费用信息</p>
                <el-table :data="tableData4" style="width: 100%" row-key="id" border>
                    <el-table-column prop="TotalOfGoods" label="商品合计" />
                    <el-table-column prop="coupon" label="优惠券" />
                    <el-table-column prop="PointdeDuction" label="积分抵扣" />
                    <el-table-column prop="BalanceDeduction" label="余额抵扣" />
                </el-table>
                <el-table :data="tableData44" style="width: 100%" row-key="id" border>
                    <el-table-column prop="TotalOrderAmount" label="订单总金额" />
                    <el-table-column prop="PayableAmount" label="应付款金额" />
                    <el-table-column prop="" label="" />
                    <el-table-column prop="" label="" />
                </el-table>

                <p style="margin: 10px 0px;">操作信息</p>
                <el-table :data="tableData5" style="width: 100%" row-key="id" border>
                    <el-table-column prop="name" label="操作者" />
                    <el-table-column prop="time" label="操作时间" />
                    <el-table-column prop="Status" label="订单状态" />
                    <el-table-column prop="paymentStatus" label="付款状态" />
                    <el-table-column prop="ShipmentStatus" label="发货状态" />
                    <el-table-column prop="low" label="备注" />
                </el-table>

            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
//基本信息
interface tableData {
    id: number
    bianhao: string
    Invoice: string
    username: string
    PaymentMethod: string
}
//基本信息
interface tableData1 {
    id: number
    DeliveryMethod: string
    logisticsNumber: string
    points: string
    nlll: string
}
//收货人信息
interface tableData2 {
    id: number
    username: string
    phone: string
    PostalCode: string
    Address: string
}
//商品信息
interface tableData3 {
    id: number
    img: string
    name: string
    number: string
    subtotal: string
}
//费用信息
interface tableData4 {
    id: number
    TotalOfGoods: string
    coupon:string
    PointdeDuction: string
    BalanceDeduction: string
}
//费用信息
interface tableData44 {
    id: number
    TotalOrderAmount: string
    PayableAmount:string
    null: string
    null2: string
}

//操作信息
interface tableData5 {
    id: number
    name: string
    time: string
    Status: string
    paymentStatus: string
    ShipmentStatus: string
    low: string
}


const tableData: tableData[] = [
    {
        id: 1,
        bianhao: '1668684358',
        Invoice: '22222222222222',
        username: '张三',
        PaymentMethod: '微信支付'
    },
]
const tableData1: tableData1[] = [
    {
        id: 99,
        DeliveryMethod: '未发货',
        logisticsNumber: '未发货',
        points: '200',
        nlll: ''
    }
]
const tableData2: tableData2[] = [
    {
        id: 95,
        username: '大梨',
        phone: '18645459868',
        PostalCode: '510888',
        Address: '四川省成都市高新区国庆安'
    }
]
const tableData3: tableData3[] = [
    {
        id: 95,
        img: '图片',
        name: '裤子',
        number: '510888',
        subtotal: '四川省成都市高新区国庆安'
    }
]
const tableData4: tableData4[] = [
    {
        id: 95,
        TotalOfGoods: '￥200.00',
        coupon:'-￥0.00',
        PointdeDuction: '-￥0.00',
        BalanceDeduction: '-￥0.00',
    }
]
const tableData5: tableData5[] = [
    {
        id: 95,
        name: '',
        time:'',
        Status: '',
        paymentStatus: '',
        ShipmentStatus:'',
        low:''
    }
]
const tableData44: tableData44[] = [
    {
        id: 95,
        TotalOrderAmount: '￥100',
        PayableAmount:'￥100',
        null: '',
        null2:''
    }
]


</script>

<style scoped lang="less">
.el-step__icon-inner {
    width: 50px;
}
</style>